position

[prowoke]

Здравствуйте. Мне 2-3 года увлечение Вебом не хватило, чтобы понять что делает position. Я старался. Я даже использую это в вёрстке, но всё равно не понимаю.

Что делает absolute, я боле мене понимаю. А вот relative:

"relative

Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. " Вот что значит "исходное место"?

А вот static:

"static

Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам."

Зачем он вообще тогда нужен?

Помогите разобраться то уже наконец. Если не жалко времени, то с примерами.

[Great Rash]

Я даже использую это в вёрстке, но всё равно не понимаю.

Это сильно

А вот static:

"static

Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам."

Зачем он вообще тогда нужен?

Это значение по-умолчанию, т.е. если в CSS не задано вообще ничего, то у элемента будет position: static;

Нужно для того, чтобы вы могли обнулить ранее заданное свойство:

<style>
.elem-1 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
}

.elem-1.no-absolute {
  position: static;
}
</style>

<div class="elem-1">я на абсолюте</div>
<div class="elem-1 no-absolute">а у меня обычная позиция</div>

Вот что значит "исходное место"?

Это место где будет стоять блок если ему вообще не задавать position.

[Vin]

http://www.site-do.ru/css/css11.php

Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке.

При относительном позионировании элемент не удаляется полностью из нормального потока (согласно порядку разметки в html) Просто это используется в основном именно для того, чтобы потом абсолютно спозиционировать вложенный элемент. При абсолютном же позионировании элемент полностью выходит из обычного потока.

Пример: у нас есть блок, который нужно расположить "по-обычному", но внутри которого у нас куча всяких фиговин, которые нужно наложить друг на друга. Если мы просто зададим им абсолютное позионирование, они будут "беспорядочно" плавать поверх нашей страницы. Если же мы зададим родительскому блоку относительное позионирование, то "фиговины" будут расположены в определённом месте внутри родительского блока. Могу выложить архив с подобными примером или прислать в ЛС (да, знаю, надо бы хостинг завести для примеров вёрстки).

Edited January 18, 2012 by Vin

[sigma77]

prowoke,

Если английский хоть немного знаешь, вот хорошая статья на эту тему - http://www.alistapart.com/articles/css-positioning-101/

[rus]

обычно на сколько я знаю relative - это это задается для родителя, для того что бы absolute понимал от какого элемента ему позиционироваться, а позиционироваться он должен только от родителя.

[MaferoK]

prowoke,

Если английский хоть немного знаешь, вот хорошая статья на эту тему - http://www.alistapart.com/articles/css-positioning-101/

Классная стататья , с очень хорошими примерами , спс )

[hedgehog]

обычно на сколько я знаю relative - это это задается для родителя, для того что бы absolute понимал от какого элемента ему позиционироваться, а позиционироваться он должен только от родителя.

position:absolute;top:100;px - сдвинет элемент вниз на 100 пикселей относительно верхней границы ближайшего родителя с position, отличным от static.

position:relative;top:100px; - сдвинет элемент на 100 пикселей относительно своего изначального положения

Edited January 18, 2012 by hedgehog

[prowoke]

Т.е. все эти заморочки только для этого?

"Пример: у нас есть блок, который нужно расположить "по-обычному", но внутри которого у нас куча всяких фиговин, которые нужно наложить друг на друга. Если мросто зададим им абсолютное позионирование, они будут "беспорядочно" плавать поверх нашей страницы. Если же мы зададим родительскому блоку относительное позионирование, то "фиговины" будут расположены в определённом месте внутри родительского блока. Могу выложить архив с подобными примером или прислать в ЛС (да, знаю, надо бы хостинг завести для примеров вёрстки)."

Это я понимаю и этим я пользуюсь.

[rus]

Т.е. все эти заморочки только для этого?

"Пример: у нас есть блок, который нужно расположить "по-обычному", но внутри которого у нас куча всяких фиговин, которые нужно наложить друг на друга. Если мросто зададим им абсолютное позионирование, они будут "беспорядочно" плавать поверх нашей страницы. Если же мы зададим родительскому блоку относительное позионирование, то "фиговины" будут расположены в определённом месте внутри родительского блока. Могу выложить архив с подобными примером или прислать в ЛС (да, знаю, надо бы хостинг завести для примеров вёрстки)."

Это я понимаю и этим я пользуюсь.

1) вобщем то да.

2) не обязательно, можно и сюда выкладывать.

3) учтите, что при позиционировании, после ресайза окна браузера, картинка может поменяться так, что вам это может не понравиться , но это в зависимости где именно вы применили позишн.

[seemax]

prowoke,

Если английский хоть немного знаешь, вот хорошая статья на эту тему - http://www.alistapart.com/articles/css-positioning-101/

Статья действительно очень наглядная, спасибо.